<template>
  <div class="app-container">
    <el-card>
      <div style="display: flex;align-items: center;justify-content: space-between">
        <span style="font-size: 18px;line-height: 18px">规则分类</span>
      </div>
      <el-table :data="fenyeList" height="605px" style="width: 100%;margin-top: 20px;" row-key="id" border
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="ruleName" label="规则名称">
        </el-table-column>
        <el-table-column prop="sort" label="排序">
        </el-table-column>
        <el-table-column  label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-if="scope.row.children" size="mini" type="text" icon="el-icon-plus" @click="add('add',scope.row)">新增</el-button>
            <el-button v-if="scope.row.children" size="mini" type="text" icon="el-icon-connection" @click="operat(scope.row)">关联</el-button>
            <el-button v-if="scope.row.children" size="mini" type="text" icon="el-icon-view" @click="query(scope.row)">查看</el-button>
            <el-button v-if="!scope.row.children" size="mini" type="text" icon="el-icon-edit" @click="add('edit',scope.row)">修改</el-button>
            <el-button v-if="!scope.row.children" size="mini" type="text" icon="el-icon-delete" @click="stopRule(scope.row)">停用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" :page-sizes="[20, 50,100]"
                     :total="total">
      </el-pagination>
    </el-card>
    <queryTable :visible.sync="visibleTable" ref="queryTableRef"></queryTable>
    <wareHouse :visible.sync="visible" ref="wareHouseRef" @addSuccess="getfindRuleAll"></wareHouse>
    <addDialog :visible.sync="visibleAdd" ref="addDialogRef" @addSuccess="getfindRuleAll"></addDialog>
  </div>
</template>
<script>
import {
  findRuleAll,//获取规则列表
  putRuleInfo//停用子类规则
} from '@/api/basic/PersonnelInformation.js'
import addDialog from './components/addDialog.vue'
import wareHouse from './components/wareHouse.vue'
import queryTable from './components/queryTable.vue'
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 20,
      total: 0,
      visible: false,
      treeData: [],
      visibleTable:false,
      visibleAdd:false
    }
  },
  components:{
    wareHouse,
    queryTable,
    addDialog
  },
  computed: {
    // 根据当前页码和每页条数计算当前页的数据
    fenyeList() {
      const startIndex = (this.pageNum - 1) * this.pageSize;
      return this.treeData.slice(startIndex, startIndex + this.pageSize);
    }
  },
  created() {
    this.getfindRuleAll();
  },
  methods: {
    //停用规则
    stopRule(row){
      this.$confirm('此操作将停用该规则, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params={
          id:row.id
        }
        putRuleInfo(params).then(res=>{
          this.$message.success(res.msg);
          this.getfindRuleAll();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //新增规则
    add(type,row){
      this.visibleAdd = true;
      this.$refs.addDialogRef.openDialog(type,row);
    },
    //仓库关联
    operat(row){
      this.visible = true;
      this.$refs.wareHouseRef.openDialog(row);
    },
    //查看关联
    query(row){
      this.visibleTable = true;
      this.$refs.queryTableRef.openDialog(row);
    },
    //初始化信息
    getfindRuleAll() {
      findRuleAll().then(response => {
        this.treeData = response.data;
        this.total = response.data.length;
      });
    },

    //切换页数
    handleSizeChange(newsize) {
      this.pageNum = 1
      this.pageSize = newsize
      this.getfindRuleAll();
    },
    handleCurrentChange(newpage) {
      this.pageNum = newpage;
      this.getfindRuleAll();
    },
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}

.btn el-button {
  margin-bottom: 20px;
}

.el-pagination {
  float: right;
  margin: 20px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.el-tree {
  height: 615px;
  overflow-y: auto;
}
</style>
